<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品列表</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
<link rel="stylesheet" href="{{ url('/common/mobile-common/common.css') }}">
<link rel="stylesheet" href="{{ url('/mobile/css/header.css') }}">	
<link rel="stylesheet" href="{{ url('/mobile/css/menu-swip.css') }}">		
<link rel="stylesheet" href="{{ url('/mobile/css/goods/goods-list.css') }}">	
<script src="{{ url('mobile/js/jquery-1.8.3.min.js') }}"></script>
<script src="{{ url('mobile/js/touchSwipe/jquery.touchSwipe.min.js') }}"></script>
<script src="{{ url('mobile/js/moreLoad/iscroll4.js') }}"></script>
<script src="{{ url('mobile/js/moreLoad/pagination.js') }}"></script>
<script src="{{ url('/common/mobile-common/hmt.js') }}"></script>
</head>
<body>
	
	
	<div class="abouts">
		<div class="wrap-cont clearfix">
				<!--头部导航-->
				<div class="top-menu menu-wip">
					<ul class="line clearfix">
						<a href="{{url('wap/goods/list?id=0')}}"><li><span @if(($_GET['id'])==0)class="nowsh" @endif>全部</span></li></a>
						@foreach($menu as $v)
						<a href="{{url('wap/goods/list?id='.$v->id)}}" data-a='0'>
							<li><span @if($_GET['id']==$v->id)class="nowsh" @endif>{{$v->category}}</span></li>
						</a>
						@endforeach
					</ul>
				</div>
				<input name="id" type="hidden" value="{{$id}}" id="id">
				<input name="page" type="hidden" value="2" id="page">
				<!--end-->
				@if(!empty(count($res)))
				<div id="wrapper">
					<div id="scroller">
					   <div id="pullDown">
					    <span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span>
					   </div>
						<ul id="thelist">
								@include('wap.goods.list-ajax')
						</ul>
						<div id="pullUp">
					   		<span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更多...</span>
					    </div>
					</div>
				</div>
				<!--end-->
				@else
		<!--无景点-->
		<div class="have-noorder">
			<div class="contt">
				<img src="{{ url('mobile/images/wxgdd.png') }}" class="wxg">
				<p>没有相关的商品</p>
				<p>可以去看看相关的商品</p>
			</div>
		</div>
		<!--end-->
		@endif
		</div>
	</div>
	
</body>
<script>
	$(function(){
		//导航切换样式
		$(".top-menu a").click(function(){
			$(this).attr("data-a",1);
		});
			
		//导航滑动
		n=$('.line a').size();				
		var wh=100*n+"%";
		$('.line').width(wh);
		var lt=(100/n/5);
		var lt_li=lt+"%";
		$('.line a').width(lt_li);			
		var y=0;
		var w=n/2;						
		$(".line").swipe( {
			swipeLeft:function() {
				if(y==-lt*w){
					alert('已经到最后页');
				}else{
					y=y-lt;
					var t=y+"%";
					$(this).css({'-webkit-transform':"translate("+t+")",'-webkit-transition':'500ms linear'} );
				}
			},
			swipeRight:function() {
				if(y==0){
					alert('已经到第一页')
				}else{
					y=y+lt;
					var t=y+"%";
					$(this).css({'-webkit-transform':"translate("+t+")",'-webkit-transition':'500ms linear'} );
				}

			}
		});
	});	
</script>
<script type="text/javascript">
	//上拉事件
	var m = 1;
	function pullUpAction() {
		setTimeout(function () {
			var id=$('#id').val();
			var page=$('#page').val();
			page=parseInt(page);
			getList(page);

			function getList(page){
				$.get("{{ url('wap/goods/pullajax') }}",{id:id,page:page},function(data){
					var more = data.more;
					if(more == 1){
						$('#page').val(page+1);
					}

					if (m== 0) {
						$('#pullUp').remove();
						return false;
					}

					if(more == 0){
						m = 0;
					}

					if(data.html){
						$('#thelist').append(data.html);
						myScroll.refresh();
					}

				});
			};
		}, 1000);
    }
</script>
</html>
